<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="10">
                <!-- 【基础信息】--------------- -->
                <div class="container">
                    <h3>基础信息：</h3>
                    <el-form :model="mainForm" :rules="rules" ref="mainForm" label-width="100px">
                        <el-form-item label="企业全称" prop="fullName">
                            <el-input v-model="mainForm.fullName" class="input" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="企业简称" prop="shorterName">
                            <el-input v-model="mainForm.shorterName" class="input" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="企业LOGO" prop="logo">
                            <uploadImage v-model="mainForm.logo" disabled />
                        </el-form-item>
                        <el-form-item label="所属行业" prop="trade">
                            <el-input v-model="mainForm.trade" class="input" disabled></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="所属行业" prop="tradeId">
                            <el-select v-model="mainForm.tradeId" placeholder="请选择所属行业" disabled class="select">
                                <el-option label="行业一" value="val1"></el-option>
                                <el-option label="行业二" value="val2"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="企业网址" prop="website">
                            <el-input v-model="mainForm.website" disabled class="input"></el-input>
                        </el-form-item>
                        <el-form-item label="企业域名" prop="realmName">
                            <el-input v-model="mainForm.realmName" disabled class="input"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <!-- active-value	switch 打开时的值	boolean / string / number	—	true
                                inactive-value	switch 关闭时的值	boolean / string / number	—	false -->
                            <el-switch v-model="mainForm.status" :active-value="1" :inactive-value="0" disabled></el-switch>
                        </el-form-item>
                        <!-- 企业ID 自动生成 -->
                        <el-form-item label="企业ID" prop="cid">
                            <el-input v-model="mainForm.cid" disabled class="input"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="11">
                <!-- 【更多信息】------------- -->
                <el-button type="primary" size="mini" :class="isOpen?'isHide':''" style="margin: 10px 0;" @click="changeMore('open')">
                    更多信息
                    <i class="el-icon-d-arrow-right el-icon--right"></i>
                </el-button>
                <div class="container more" :class="isOpen?'':'isHide'">
                    <el-row>
                        <h3>更多信息：</h3>
                        <el-button type="primary" size="mini" @click="changeMore('close')" style="margin: 10px 0; float: right;">
                            关闭
                            <i class="el-icon-close el-icon--right"></i>
                        </el-button>
                    </el-row>
                    <el-row>
                        <el-form :model="moreForm" :rules="moreRules" ref="moreForm" label-width="100px">
                            <el-form-item label="企业营业执照" prop="license">
                                <uploadImage v-model="moreForm.license" placeholder="请输入企业营业执照" :tipmsg="tipmsg" :theType="10" />
                            </el-form-item>
                            <el-form-item label="企业信用代码" prop="creditCode">
                                <el-input v-model="moreForm.creditCode" placeholder="请输入企业信用代码" class="input"></el-input>
                            </el-form-item>
                            <el-form-item label="企业联系人" prop="contacts">
                                <el-input v-model="moreForm.contacts" placeholder="请输入企业联系人" class="input"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="phone">
                                <el-input v-model="moreForm.phone" placeholder="请输入联系电话" maxlength="11" class="input"></el-input>
                            </el-form-item>
                            <el-form-item label="企业简介">
                                <editor v-model="moreForm.synopsis" :min-height="192"/>
                            </el-form-item>
                            <!-- v-hasPermi="['11220']" -->
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('moreForm')">保存</el-button>
                                <el-button @click="reset()">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getData,updateData } from "@/api/system/companyInfo";
import UploadImage from '@/components/ImageUpload';
import Editor from '@/components/Editor';

export default {
    name: 'companyInfo',
    data() {
        var validateCode = (rule, value, callback) => {
            // 新晋时代企业信用代码：91140105MA0GUQ3W7N
            if (this.moreForm.creditCode) {
                var isTrue = this.creditCodeValid(this.moreForm.creditCode);
                if (isTrue) {
                    callback();
                }else {
                    callback(new Error('请输入正确的企业信用代码!'));
                }
            }else {
                callback();
            }
        };
        return {
            isOpen: false,
            // tipmsg: '支持上传jpg/png文件，且不超过500kb',
            tipmsg: '支持上传jpg/png文件，且不超过2MB',
            mainForm: {},
            rules: {}, 
            moreForm: {
                license: undefined,
                creditCode: undefined,
                contacts: undefined,
                phone: undefined,
                synopsis: undefined
            },
            moreRules: {
                /* creditCode: [
                    { validator: validateCode, trigger: 'blur' }
                ], */
                contacts: [
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                phone: [
                    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
                ],
            }
        }
    },
    components: {
        UploadImage,
        Editor
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            // let theid = '18abffeaf91c545b9db43d1f940fb979'
            getData().then( response => {
                this.mainForm = response.result;
                this.moreForm = {
                    license: response.result.license,
                    creditCode: response.result.creditCode,
                    contacts: response.result.contacts,
                    phone: response.result.phone,
                    synopsis: response.result.synopsis
                }
            });
        },
        // 切换显示/隐藏【更多信息】
        changeMore(val) {
            // this.resetForm('moreForm');
            // this.isOpen = (!this.isOpen)
            if (this.isOpen) {
                this.isOpen = false
                this.getList()
            }else {
                this.isOpen = true
            }
        },
        submitForm(formName) {
            let form = Object.assign(this.mainForm,this.moreForm)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    updateData(form).then(response => {
                        this.msgSuccess("修改成功");
                        this.open = false;
                        this.getList();
                    });
                }
            });
        },
        reset() {
            this.moreForm = {
                license: undefined,
                creditCode: undefined,
                contacts: undefined,
                phone: undefined,
                synopsis: undefined
            }
            this.resetForm("moreForm");
        }
    },
    mounted() {
    }
}
</script>

<style scoped lang="scss">
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .container {
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.1);
        padding-top: 0;
        padding: 0 20px;
        h3 {
            margin: 10px 0;
            padding: 7px 15px;
            font-size: 12px;
            border-radius: 3px;
            color: #FFF;
            background-color: #409EFF;
            display: inline-block;
            line-height: 1;
            border: 1px solid #409EFF;
            text-align: center;
            box-sizing: border-box;
            font-weight: 500;
        }
    }
    /deep/ .el-button.isHide {
        display: none;
    }
    .container.more.isHide {
        display: none;
    }
}
</style>
